
<template>
  <div class="live-battery">
     <div class="warning-box">
      <img class="warning1" src="../../assets/img/dp/c_1.png" alt="">
      <img class="warning2" src="../../assets/img/dp/warning02.png" alt="">
      <img src="../../assets/img/dp/c_3.png" class="warning3" alt="">
      <img src="../../assets/img/dp/warning04.png" class="warning4" alt="">
     </div>
     <div class="content-text">
        <AnimatedNumber :value="checkNum" :round="1" :format="formatToPrice" />
     </div>
  </div>
</template>

<script>
import * as API from '@/api'
import AnimatedNumber from "animated-number-vue";
export default {
  components: {
    AnimatedNumber
  },

  data() {
    return {
      pageflag: true,
      timer: null,
      autoTime: 2 * 60 * 1000,
      checkNum: 0
    };
  },
  created() {
    this.getData()
  },
  mounted() {
    this.switper()
  },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },

    getData() {
      this.pageflag = true
      API.GET('/super/screen/replace_stat').then(res => {
        console.log('5分钟换电人数', res)
        if(res.code === 1){
          this.checkNum = res.data
        } else {
          this.pageflag = false
        }
      })
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.autoTime);
    },
    formatToPrice(value) {
      return `${value.toFixed(0)}`;
    }
  }
};
</script>
<style lang='scss' scoped>
.live-battery {
  position: relative;
  width: 100%;
  height: 100%;
  .warning-box {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%) ;
  }
  .content-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 70px;
    font-weight: 900;
    color: #fff;
    font-family: "DS-Digital";
  }
  .warning1 {
    position: absolute;
    top: 0;
    left: 26px;
    animation: rotationInner-1445c7a2 3s infinite 
linear;
    transform-origin: 100% 50%;
  }

  .warning2 {
    position: absolute;
    top: 20px;
    left: 17px;
    animation: rotationInner-1445c7a2 3s infinite 
linear;
    transform-origin: 50% 50%;
  }

  .warning3 {
    position: absolute;
    top: 91px;
    left: 37px;
    display: none;
  }

  .warning4 {

  }
}

@keyframes rotationInner-1445c7a2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }

}
</style>
